<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>后台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        dark: '#1D2939',
                        'dark-light': '#344054',
                        'gray-light': '#F5F7FA',
                        success: '#039855',
                        danger: '#D92D20'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif']
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.4s ease-out'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {opacity: '0'},
                            '100%': {opacity: '1'}
                        },
                        slideUp: {
                            '0%': {transform: 'translateY(20px)', opacity: '0'},
                            '100%': {transform: 'translateY(0)', opacity: '1'}
                        }
                    }
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }

            .bg-grid {
                background-image: linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
                background-size: 30px 30px;
            }

            .glass-effect {
                backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.7);
            }

            .input-focus {
                @apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
            }
        }
    </style>

    <!-- 加载字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="font-inter bg-gray-light min-h-screen flex items-center justify-center p-4 bg-grid">
<!-- 装饰性元素 -->
<div class="fixed top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary"></div>
<div class="fixed -top-24 -right-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
<div class="fixed -bottom-32 -left-32 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>

<!-- 主容器 -->
<div class="relative w-full max-w-6xl flex flex-col lg:flex-row items-center gap-8 lg:gap-16 animate-fade-in">
    <!-- 左侧品牌/信息区域 -->
    <div class="w-full lg:w-1/2 space-y-6 animate-slide-up" style="animation-delay: 0.1s;">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                <i class="fa fa-connectdevelop text-white text-xl"></i>
            </div>

        </div>

        <div class="space-y-4">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark leading-tight">
                欢迎回到<br>
                <span class="bg-gradient-to-r from-primary to-secondary text-gradient">管理中心</span>
            </h2>
            <p class="text-gray-600 max-w-md">
                登录以访问您的后台管理系统，监控数据指标并管理系统配置。
            </p>
        </div>

        <!-- 科技感图形元素 -->
        <div class="relative mt-8">
            <div class="absolute -top-6 -left-6 w-24 h-24 border border-primary/10 rounded-lg"></div>
            <div class="absolute -bottom-4 -right-4 w-32 h-32 border border-secondary/10 rounded-lg"></div>
            <img alt="科技感数据可视化图表" class="w-full h-auto rounded-xl shadow-lg relative z-10"
                 src="https://picsum.photos/id/180/600/400">
        </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="w-full lg:w-5/12 animate-slide-up" style="animation-delay: 0.3s;">
        <div class="glass-effect border border-gray-200 rounded-2xl p-6 md:p-8 shadow-xl w-full">
            <div class="mb-6">
                <h3 class="text-xl font-semibold text-dark mb-1">账户登录</h3>
                <p class="text-gray-500 text-sm">请输入您的账号信息以登录系统</p>
            </div>

            <form class="space-y-5" id="loginForm">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="username">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                            <i class="fa fa-user"></i>
                        </div>
                        <input class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg transition-all input-focus"
                               id="username" name="username" placeholder="请输入用户名"
                               required
                               type="text">
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-sm font-medium text-gray-700" for="password">密码</label>

                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg transition-all input-focus"
                               id="password" name="password" placeholder="请输入密码"
                               required
                               type="password">
                        <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-primary transition-colors"
                                id="togglePassword"
                                type="button">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>


                <button class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-300 flex items-center justify-center gap-2 group"
                        type="submit">
                    <span>登录系统</span>
                    <i class="fa fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i>
                </button>
            </form>


            <!-- 页脚信息 -->
            <div class="mt-6 text-center text-sm text-gray-500">
                <p>© 2023 管理系统 v3.5.0 | 安全协议: TLS 1.3</p>
            </div>
        </div>
    </div>

    <!-- 状态提示框 -->
    <div class="fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-x-full transition-transform duration-300 z-50"
         id="statusToast">
        <div class="w-5 h-5 rounded-full flex items-center justify-center" id="statusIcon">
            <i class="fa fa-circle-o-notch fa-spin text-white text-xs"></i>
        </div>
        <span id="statusMessage">处理中...</span>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            const icon = togglePassword.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });

        // 登录表单提交处理
        const loginForm = document.getElementById('loginForm');
        const statusToast = document.getElementById('statusToast');
        const statusIcon = document.getElementById('statusIcon');
        const statusMessage = document.getElementById('statusMessage');

        // 显示状态提示
        function showStatus(message, isError = false) {
            statusMessage.textContent = message;

            // 设置样式
            if (isError) {
                statusToast.className = 'fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-x-0 transition-transform duration-300 z-50 bg-danger/10 border border-danger/20 text-danger';
                statusIcon.className = 'w-5 h-5 rounded-full bg-danger/20 flex items-center justify-center';
                statusIcon.innerHTML = '<i class="fa fa-exclamation text-danger text-xs"></i>';
            } else {
                statusToast.className = 'fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-x-0 transition-transform duration-300 z-50 bg-success/10 border border-success/20 text-success';
                statusIcon.className = 'w-5 h-5 rounded-full bg-success/20 flex items-center justify-center';
                statusIcon.innerHTML = '<i class="fa fa-circle-o-notch fa-spin text-success text-xs"></i>';
            }

            // 3秒后隐藏
            setTimeout(() => {
                statusToast.classList.remove('translate-x-0');
                statusToast.classList.add('translate-x-full');
            }, 3000);
        }

        // 表单提交
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();

            // 显示加载状态
            showStatus('正在登录系统...');

            // 获取表单数据
            const formData = new FormData(loginForm);
            const loginData = {
                username: formData.get('username'),
                pwd: formData.get('password')

            };

            try {
                // 模拟API请求 - 实际使用时替换为真实API地址
                const response = await fetch('/auth/cmsLogin', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(loginData),
                });

                const resp = await response.json();

                if (resp.code == 200) {
                    showStatus('登录成功，正在跳转...');
                    authId = resp.data.authId;
                    token = resp.data.token;
                    var ss = "main.html?authId=" + authId + "&token=" + token;
                    window.location = ss;
                } else {
                    throw new Error("错误码:" + resp.code);
                }

            } catch (error) {
                showStatus(error.message, true);
            }
        });

        // 页面加载动画
        window.addEventListener('load', () => {
            document.body.classList.add('opacity-0');
            setTimeout(() => {
                document.body.classList.add('transition-opacity', 'duration-500');
                document.body.classList.remove('opacity-0');
            }, 100);
        });
    </script>
</body>
</html>
    